<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mouse</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>

    <style type="text/css">
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        svg {
            cursor: pointer;
            width: 100%;
            height: 100%;
        }

        circle {
            fill: none;
            stroke: steelblue;
        }
    </style>
</head>

<body>

<script type="text/javascript">
    var r = 400;

    var svg = d3.select("body")
            .append("svg");

    var positionLabel = svg.append("text")
            .attr("x", 10)
            .attr("y", 30);

    svg.on("mousemove", function () { //<-A
        printPosition();
    });
            
    function printPosition() { //<-B
        var position = d3.mouse(svg.node()); //<-C
        positionLabel.text(position);
    }  

    svg.on("click", function () { //<-D
        for (var i = 1; i < 5; ++i) {
            var position = d3.mouse(svg.node());

            var circle = svg.append("circle")
                    .attr("cx", position[0])
                    .attr("cy", position[1])
                    .attr("r", 0)
                    .style("stroke-width", 5 / (i))
                    .transition()
                        .delay(Math.pow(i, 2.5) * 50)
                        .duration(2000)
                        .ease(d3.easeQuadIn)
                    .attr("r", r)
                    .style("stroke-opacity", 0)
                    .on("end", function () {
                        d3.select(this).remove();
                    });
        }
    });
</script>

</body>

</html>